<template>
  <!-- 企业角色管理 -->
  <a-button v-hasPermission="'energyRoleAdd'" type="primary" class="filterBtn greenBtn" @click="handleUser"
    >新增企业角色</a-button
  >
  <div class="tableContent">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'handle'">
          <a-button v-hasPermission="'energyRoleEdit'" type="link" @click="handleEdit(record)">编辑</a-button>
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmDel(record)"
          >
            <template #title> 是否确定删除该角色? </template>
            <a-button v-hasPermission="'energyRoleDelete'" type="link" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </div>

  <AddRole
    :addRoleVisible="addRoleVisible"
    :isEdit="isEdit"
    :rowData="rowData"
    @update:addRoleVisible="addRoleVisible = $event"
    @getRoleList="getRoleList"
  />
</template>
<script setup>


import AddRole from "./conpoments/addRole.vue";

const $api = inject("$api");
const filterForm = ref({
  account: null,
  username: null,
  roleIds: null,
  deptIds: null,
  enable: null,
  size: 10,
  current: 1,
});
const total = ref();
const addRoleVisible = ref(false);
const tableData = ref([]);
const isEdit = ref(false);
const rowData = ref({});
const tableLoading = ref(false);
const columns = ref([
  {
    title: "企业角色名称",
    dataIndex: "name",
    key: "name",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "企业角色编码",
    dataIndex: "code",
    key: "code",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 120,
    resizable: true,
    align: "center",
    fixed: "right",
  },
]);
function handleResizeColumn(w, col) {
  col.width = w;
}
const handleCompany = () => {
  isEdit.value = false;
  addRoleVisible.value = true;
};
const confirmDel = async (data) => {
  const res = await $api.roleDel(data.id);
  if (res && res.code === 0) {
    message.success("删除成功");
    getRoleList();
  }
};
const handleUser = () => {
  isEdit.value = false;
  addRoleVisible.value = true;
};
const handleEdit = async (data) => {
  rowData.value = data;
  isEdit.value = true;
  addRoleVisible.value = true;
};
const getRoleList = async () => {
  const params = {
    ...filterForm.value,
    roleType: 1, // 角色类型1：企业角色 2：内部角色组 3：内部子角色
  };
  tableLoading.value = true;
  const res = await $api.roleList(params);
  tableLoading.value = false;
  if (res && res.code === 0) {
    tableData.value = res.data;
  }
};

onMounted(async () => {
  getRoleList();
});
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>